<template>
  <view class="property-pay">
    <view class="header">
      <view class="header-pay" @click="pay">
        <view class="header-pay-text">在线支付</view>
        <view class="triangle" v-show="payShow"></view>
      </view>
      <view class="header-list" @click="list">
        <view class="header-list-text">支付记录</view>
        <view class="triangle" v-show="listShow"></view>
      </view>
    </view>
    <view class="property-body">
      <view class="content-left" v-if="payShow">
        <view class="content-ele">
          <view class="box">
            <view class="box-left">
              <view class="box-left-icon">
                <text class="iconfont icon-dianfei icon-pay"></text>
              </view>
              <view class="box-left-text">
                <view class="left-text-up">电费</view>
                <view class="left-text-down">{{ electricMoney }}</view>
              </view>
            </view>
            <view class="box-right">
              <view class="box-right-button" @click="elePay">
                <button plain="true">支付</button>
              </view>
            </view>
          </view>
        </view>
        <view class="content-water">
          <view class="box">
            <view class="box-left">
              <view class="box-left-icon">
                <text class="iconfont icon-water icon-pay"></text>
              </view>
              <view class="box-left-text">
                <view class="left-text-up">水费</view>
                <view class="left-text-down">{{ waterMoney }}</view>
              </view>
            </view>
            <view class="box-right">
              <view class="box-right-button" @click="waterPay">
                <button plain="true">支付</button>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="content-right" v-if="listShow">
        <!-- <view v-for="(item, index) in lis" :key="index">fff</view> -->
        <view
          class="list-content"
          v-for="(item, index) in listData"
          :key="index"
        >
          <view class="list-content" v-if="item.water > 0">
            <view class="list-left">
              <view class="list-type">水费</view>
              <view class="list-date">{{ item.water_time }}</view>
            </view>
            <view class="list-right"> -{{ item.water }} </view>
          </view>
          <view class="list-content" v-if="item.electric > 0">
            <view class="list-left">
              <view class="list-type">电费</view>
              <view class="list-date">{{ item.ele_time }}</view>
            </view>
            <view class="list-right"> -{{ item.electric }} </view>
          </view>
          <!-- <view class="list-right"> -{{ item.water }} </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { GetTime } from "../../../util/getTime.js";
export default {
  data() {
    return {
      show: true,
      payShow: true,
      listShow: false,
      waterMoney: "无信息",
      electricMoney: "无信息",
      items: ["1", "2", "3"],
      openid: "",
      listData: [],
      time: "",
    };
  },
  onShow() {
    this.payRequest();
  },
  methods: {
    payRequest() {
      let that = this;
      uni.getStorage({
        key: "openid",
        success: function (res) {
          console.log(res);
          that.openid = res.data;
          that
            .$MyRequest({
              url: "/get_pay_month",
              method: "POST",
              data: {
                openid: that.openid,
              },
            })
            .then((res) => {
              console.log(res);

              if (res.data.data[0].status < 0) {
                that.waterMoney = "无信息";
                that.electricMoney = "无信息";
              } else if (res.data.data[0].status == 1) {
                if (res.data.data[0].water_status < 0) {
                  that.waterMoney = res.data.data[0].water;
                } else {
                  that.waterMoney = "已支付";
                }
                if (res.data.data[0].ele_status < 0) {
                  that.electricMoney = res.data.data[0].electric;
                } else {
                  that.electricMoney = "已支付";
                }
                // that.waterMoney = res.data.data[0].water;
                // that.electricMoney = res.data.data[0].electric;
              } else {
                that.waterMoney = "已支付";
                that.electricMoney = "已支付";
              }
            });
        },
        fail: (err) => {},
      });
    },
    //上侧切换
    pay() {
      this.payShow = true;
      this.listShow = false;
      // console.log(this.payShow);
    },
    list() {
      // this.payShow = false;
      // this.listShow = true;
      this.$MyRequest({
        url: "/get_pay_list_one",
        method: "POST",
        data: {
          openid: this.openid,
        },
      }).then((res) => {
        this.listData = res.data.data;
        this.listData = this.listData.map((s) => {
          if (s.water === null) {
            s.water = -1;
          }
          if (s.electric === null) {
            s.electric = -1;
          }
          // console.log("1");
          return s;
        });
        this.listData = this.listData.sort((a, b) => {
          return a.id < b.id ? 1 : -1;
        });
        console.log(this.listData);
        this.payShow = false;
        this.listShow = true;
      });
    },
    elePay() {
      console.log("电费");
      let eltTime = new GetTime();
      this.time = eltTime.dateNow();
      console.log(this.electricMoney === "已支付");
      if (this.electricMoney == "已支付" || this.electricMoney == "无信息") {
        uni.showToast({
          title: "没有需要支付的电费数据",
          icon: "none",
          duration: 3000,
        });
      } else {
        let that = this;
        uni.showModal({
          title: "请确认是否支付？",
          content: that.electricMoney + "元",
          cancelText: "取消",
          confirmText: "确定支付",
          cancelColor: "#999",
          confirmColor: "#20B1FF",
          success(res) {
            if (res.confirm) {
              that
                .$MyRequest({
                  url: "/set_pay_month_ele",
                  method: "POST",
                  data: {
                    openid: that.openid,
                    finsh_time: that.time,
                  },
                })
                .then((res) => {
                  that.payRequest();
                });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }

      /*
      uni.requestPayment({
        provider: "wxpay",
        orderInfo: orderInfo,
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        },
      });
      */
    },
    waterPay() {
      console.log("水费");
      let waterTime = new GetTime();
      this.time = waterTime.dateNow();
      if (this.waterMoney == "已支付" || this.waterMoney == "无信息") {
        // console.log("yizhifu ");
        uni.showToast({
          title: "没有需要的支付水费数据",
          icon: "none",
          duration: 3000,
        });
      } else {
        let that = this;
        uni.showModal({
          title: "请确认是否支付？",
          content: that.waterMoney + "元",
          cancelText: "取消",
          confirmText: "确定支付",
          cancelColor: "#999",
          confirmColor: "#20B1FF",
          success(res) {
            if (res.confirm) {
              that
                .$MyRequest({
                  url: "/set_pay_month_water",
                  method: "POST",
                  data: {
                    openid: that.openid,
                    finsh_time: that.time,
                  },
                })
                .then((res) => {
                  that.payRequest();
                });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });

        // this.$MyRequest({
        //   url: "/set_pay_month_water",
        //   method: "POST",
        //   data: {
        //     openid: this.openid,
        //     finsh_time: this.time,
        //   },
        // }).then((res) => {
        //   this.payRequest();
        // });
      }
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.property-pay {
  width: 100%;
  .header {
    display: flex;
    height: 120rpx;
    color: #fff;
    .header-pay {
      position: relative;
      flex: 50%;
      height: 100%;
      background-color: #ff839dff;

      .header-pay-text {
        position: absolute;
        height: 100%;
        width: 100%;
        @include center;
        // margin: 0 auto;
      }
      .triangle {
        position: absolute;
        // height: 100%;
        // width: 100%;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 10px solid #ff839dff;
        top: 120rpx;
        left: 47%;
      }
    }
    .header-list {
      position: relative;
      height: 100%;
      flex: 50%;
      background-color: #67ade0;
      .header-list-text {
        position: absolute;
        height: 100%;
        width: 100%;
        @include center;
        // margin: 0 auto;
      }
      .triangle {
        position: absolute;
        // height: 100%;
        // width: 100%;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 10px solid #67ade0;
        top: 120rpx;
        left: 47%;
      }
    }
  }
  .property-body {
    height: 100vh;
    background-color: $uni-color-indexBg;
    .content-left {
      width: 100%;
      // box-sizing: border-box;
      // margin: 0 auto;
      padding-top: 70rpx;
      .content-ele {
        width: 80%;
        height: 250rpx;
        background-color: #fff;
        border-radius: 10px;
        margin: 0 auto;
      }
      .content-water {
        width: 80%;
        height: 250rpx;
        background-color: #fff;
        border-radius: 10px;
        margin: 0 auto;
        margin-top: 50rpx;
      }
    }
    .content-right {
      width: 100%;
      // padding-top: 70rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      background-color: #fff;
      .list-content {
        background-color: #fff;

        .list-content {
          // @include center;
          border-bottom: 1rpx solid rgb(223, 223, 223);
          height: 70px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: $uni-text-color;
          .list-type {
            // color: $uni-text-color;
          }
          .list-date {
            color: $uni-text-color-placeholder;
            font-size: 30rpx;
          }
          .list-right {
            // @include center;
            color: $uni-color-warning;
          }
        }
      }
    }
    .box {
      padding: 0 40rpx 0 10rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // @include center;
      .box-left {
        display: flex;
        @include center;
        .box-left-icon {
          // @include center;
          // display: flex;
          // justify-self: start;
          .icon-pay {
            font-size: 150rpx;
            color: $uni-text-color-placeholder;
          }
          .icon-shui {
            font-size: 110rpx;
            color: $uni-text-color-placeholder;
          }
        }
        .box-left-text {
          // font-weight: 600;
          .left-text-up {
            @include center;

            color: $uni-text-color-placeholder;
          }
          .left-text-down {
            @include center;
            color: $uni-color-green;
          }
        }
      }
      .box-right {
        .box-right-button {
          button {
            color: #fff;
            background-color: $uni-color-primary;
            width: 150rpx;
            border: none;
          }
        }
      }
    }
  }
}
</style>
